<template>
  <div>
    <div class="thumb">
      <div class="thumb-bg" :style="setBg"></div>
      <div class="thumb-content">
        <img class="thumb-image" mode="aspectFit" :src="bookinfo.image">
        <p class="thumb-title">{{bookinfo.title}}</p>
        <p class="thumb-author">{{bookinfo.author}}</p>
      </div>
    </div>
    <div class="bookInfo">
      <div class="flex">
        <div>
          <img class="avatar" :src="userinfo.avatarUrl">
          {{userinfo.nickname}}
        </div>
        <div>
          {{bookinfo.rate}} <rate :value="bookinfo.rate"></rate>
        </div>
      </div>
      <div class="flex">
        <div class="publisher">{{bookinfo.publisher}}</div>
        <div class="price">{{bookinfo.price}}</div>
      </div>
    </div>
    <div class="badge">
      <div class="tag" :key="tagIndex" v-for="(tag,tagIndex) in bookinfo.tags">
        {{tag}}
      </div>
    </div>
    <div class="summary">
      <p class="item" v-for="(item,index) in bookinfo.summary" :key="index">{{item}}</p>
    </div>
  </div>
</template>

<script>
import Rate from '@/components/rate/rate'
export default {
  props:['bookinfo'],
  components:{
    Rate
  },
  computed: {
    setBg () {
      if(this.bookinfo.image){
        return `background-image:url(${this.bookinfo.image})` 
      }
    },
    userinfo () {
      return this.bookinfo.user_info || {}
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~style/mixin'
  @import '~style/varibles'
  .thumb
    position relative
    .thumb-bg
      width 100%
      height 450rpx
      overflow hidden
      filter blur(10px)
      background-position center
    .thumb-content
      position absolute
      width 100%
      top 30rpx
      left 0
      z-index 10
      text-align center
      color #fff
      padding 0 10px
    .thumb-image
      display block
      width 200rpx
      height 300rpx
      margin 0 auto
    p
      ellipsis()
    .thumb-title
      font-size 16px
      margin 10rpx 0
    .thumb-author
      font-size 14px
  .bookInfo
    padding 0 10px
    margin 10px
    .flex
      display flex
      justify-content space-between
      margin-bottom 10px
      div
        flex 1
        font-size 14px
        &:last-of-type
          text-align right
        .avatar
          width 50rpx
          height 50rpx
          border-radius 50%
          vertical-align middle
  .badge
    padding 0 10px
    margin 10px
    font-size 14px
    .tag
      display inline-block
      color $themeColor
      border 1px solid $themeColor
      padding 0 5px
      margin-right 5px
      margin-bottom 5px
      border-radius 10px
  .summary
    padding 0 10px
    margin 10px
    font-size 14px
    .item
      text-indent 2em
</style>
